<!-- components/Pagination.vue -->
<template>
  <div class="pagination-container">
    <div class="pagination-info">
      <span>共 {{ totalItems }} 条</span>
      <USelect
        v-model="selectedItemsPerPage"
        :items="itemsPerPageOptions"
        class="w-[90px] h-[40px] pagination-select"
        size="sm"
        @change="updateItemsPerPage"
      >
        <template #trailing>
          <span class="text-[14px] p-0">条/页</span>
        </template>
      </USelect>
    </div>
    <div class="pagination-controls">
      <button
        @click="prevPage"
        :disabled="currentPage === 1"
        class="pagination-button"
      >
        <svg
          width="12"
          height="12"
          viewBox="0 0 12 12"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M7.5 10.5L3 6L7.5 1.5"
            stroke="#666666"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </button>
      <div class="pagination-pages">
        <button
          v-for="page in displayedPages"
          :key="page"
          @click="goToPage(page)"
          :class="['pagination-page', { active: page === currentPage }]"
        >
          {{ page }}
        </button>
      </div>
      <button
        @click="nextPage"
        :disabled="currentPage === totalPages"
        class="pagination-button"
      >
        <svg
          width="12"
          height="12"
          viewBox="0 0 12 12"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M4.5 1.5L9 6L4.5 10.5"
            stroke="#666666"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </button>

      <div class="pagination-jump">
        <span class="mr-[8px]">跳转至</span>
        <input
          v-model="jumpPage"
          @keyup.enter="handleJump"
          type="number"
          min="1"
          :max="totalPages"
          placeholder=""
          class="pagination-input"
        />
        <!-- <button @click="handleJump" class="pagination-button">

                </button> -->
        <span>页</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
// import { NSelect } from 'naive-ui'
const props = defineProps({
  totalItems: {
    type: Number,
    required: true,
  },
  itemsPerPage: {
    type: Number,
    default: 10,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
})

const emit = defineEmits(['update:currentPage', 'update:itemsPerPage'])

const totalPages = computed(() =>
  Math.ceil(props.totalItems / props.itemsPerPage),
)

const selectedItemsPerPage = ref(props.itemsPerPage)

const itemsPerPageOptions = [9, 15, 30, 60]

const prevPage = () => {
  if (props.currentPage > 1) {
    emit('update:currentPage', props.currentPage - 1)
  }
}

const nextPage = () => {
  if (props.currentPage < totalPages.value) {
    emit('update:currentPage', props.currentPage + 1)
  }
}

const goToPage = (page) => {
  emit('update:currentPage', page)
}

const updateItemsPerPage = () => {
  emit('update:itemsPerPage', selectedItemsPerPage.value)
}

const jumpPage = ref('')

const handleJump = () => {
  const page = parseInt(jumpPage.value, 9)
  if (!isNaN(page) && page >= 1 && page <= totalPages.value) {
    emit('update:currentPage', page)
    jumpPage.value = ''
  }
}

const displayedPages = computed(() => {
  const maxVisiblePages = 10
  const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2)

  let startPage = Math.max(1, props.currentPage - halfMaxVisiblePages)
  let endPage = Math.min(totalPages.value, startPage + maxVisiblePages - 1)

  if (endPage - startPage + 1 < maxVisiblePages) {
    startPage = Math.max(1, endPage - maxVisiblePages + 1)
  }

  return Array.from(
    { length: endPage - startPage + 1 },
    (_, i) => startPage + i,
  )
})

watch(
  () => props.itemsPerPage,
  (newValue) => {
    selectedItemsPerPage.value = newValue
  },
)
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px 0;
  width: 100%;
  box-sizing: border-box;
}

.pagination-info {
  display: flex;
  align-items: center;
  color: #666666;
  font-size: 14px;
  margin-right: 20px;
}

.pagination-info span {
  margin-right: 10px;
}

.pagination-select {
  background-color: #ffffff;
  color: #666666;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
}

.pagination-controls {
  display: flex;
  align-items: center;
}

.pagination-button {
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 0 4px;
}

.pagination-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination-pages {
  display: flex;
  align-items: center;
  margin: 0px;
}

.pagination-page {
  font-family: HelveticaNeue;
  background-color: transparent;
  border: 1px solid #dddddd;
  border-radius: 4px;
  height: 32px;
  min-width: 32px;
  margin: 0 4px;
  line-height: 22px;
  color: #666666;
  font-size: 14px;
  box-sizing: border-box;
  cursor: pointer;
}

.pagination-page.active {
  background-color: #1955f7;
  color: white;
  border-color: #1955f7;
}

.pagination-jump {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.pagination-input {
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 14px;
  width: 60px;
  text-align: center;
  margin-right: 5px;
}

.pagination-input:focus {
  outline: none;
  border-color: #1955f7;
}
</style>
